
;;(function($){
    $(".icons .btn").click(function(){
        $(".icons ul").height(92);
        $(".icons .btn").hide();
        $(".icons .btns").show()
    })
    $(".icons .btns").click(function(){
        $(".icons ul").height(46);
        $(".icons .btn").show();
        $(".icons .btns").hide()    
    })
    $(".icons ul li a").mouseenter(function(){
        $(this).css({display:"none"})
        $(this).parent().find("span").css({display:"inline-block"})
    })
    $(".icons ul li").mouseleave(function(){
        $(this).find("a").css({display:"inline-block"})
        $(this).find("span").css({display:"none"})
    })
    $(".productTitle").css({
        width:"1200px",
        height:"50px",
        margin:"0 auto",
    })
    $(".productTitle ul").css({
        height:"50px",
    })
    $(".productTitle ul li").css({
        height:"50px",
        width:"71px",
        textAlign:"center",
        float:"left",
        fontSize:"14px",
        color:"#333",
        padding:"20px",
    })
    $(".productTitle ul li .enters").css({
        background:"#fff",
        color:"#333",
    })
    $(".productTitle ul li .enters div").css({
        marginTop:10
    })
    $(".productTitle ul li .enters").css({display:"none"})
    $(".productTitle ul li").eq(1).css({color:"#8FC31F"})
    $(".productTitle ul li").mouseenter(function(){
        $(this).css({color:"#8FC31F"});
        $(this).find(".enters").show()
        $(".productTitle ul li").eq(1).css({color:"#333"})
        $(this).siblings().css({color:"#333"})
    })
    $(".productTitle ul li").mouseleave(function(){
        $(this).css({color:"#333"});
        $(this).find(".enters").hide();
        $(".productTitle ul li").eq(1).css({color:"#8FC31F"})
    })
})(jQuery);
// ;;(function($){
//              $.ajax({
//                  type: "GET",
//                  url: "./json/kuaizulist.json",
//                  dataType: "json",
//                  success: function(data){
//                              var html = '';
//                              $.each(data, function(i,item){
                                //    html += `<li class="hot-start hot-li">
                                //                 <a href="#" class="blink-a">
                                //                     <img src="${item.image_url}"/>
                                //                     <div class="blink-white"></div>
                                //                 </a>
                                //                 <p><a href="#">${item.title}</a></p>
                                //                 <p><a href="#">${item.goods_name}</a></p>
                                //                 <h4>￥<span>${item.group_price}</span></h4>
                                //             </li>`;
//                             });
//                             $("#hot-title-ul").html(html)
//                 }
//             });
   
// })(jQuery);
;;(function($){
    // ;(function(){
        class GoodsList{
            constructor(){};
            init(){
                this.load();
                this.pageNow = 1; //默认初始化当前页码
                this.totalPage = 0; //总页码
                this.totalList = 0; //总记录条数
                this.showItemNum = 15; //一页显示的记录条数
                this.haveShow = 0; //当前已经显示的数据
                this.data = null;
            }
            //数据加载
            load(){
                fetch("./json/kuaizulist.json")
                .then( res =>{
                    return res.json();
                })
                .then((res)=>{
                    this.data = res.list;
                    this.renderAllHots(this.data,this.showItemNum);
        
                    this.totalList = res.list.length;
                    this.totalPage = Math.ceil(this.totalList / this.showItemNum) ;
                    this.initPages();
                    this.bindEvent();
                });
            }
            //渲染商品列表
            renderAllHots(list,showItemNum){
                let html = "";
                showItemNum += this.haveShow;
                for( ;this.haveShow < showItemNum ; this.haveShow++){
                    if(!list[this.haveShow]) break;
                    html += `<li class="hot-start hot-li">
                                        <a href="goods.html?values=${list[this.haveShow].id}" class="blink-a">
                                            <img src="${list[this.haveShow].image_url}"/>
                                            <div class="blink-white"></div>
                                        </a>
                                        <p><a href="./index.html">${list[this.haveShow].title}</a></p>
                                        <p><a href="./index.html">${list[this.haveShow].goods_name}</a></p>
                                        <h4>￥<span>${list[this.haveShow].group_price}</span></h4>
                                    </li>`;              
                }
                $("#hot-title-ul").html(html);
            }
        
        
            //初始化分页栏目
            initPages(){
                $("#pages").paging({
                    pageNum:  this.pageNow, // 当前页面
                    totalNum: this.totalPage, // 总页码
                    totalList: this.totalList, // 记录总数量
                    callback: function (num) { //回调函数
                    }
                });
            }
        
            bindEvent(){
                $(".page_div").on("click",".btn",this.goSpecificPage.bind(this));
                $(".page_div").on("click","#firstPage",this.getToFirstPage.bind(this));
                $(".page_div").on("click","#prePage",this.toPre.bind(this));
                $(".page_div").on("click","#nextPage",this.toNext.bind(this));
                $(".page_div").on("click","#lastPage",this.toLast.bind(this));
            }
            //回到首页
            getToFirstPage(){   
                window.scrollTo(0,0); 
                this.haveShow = 0;
                this.renderAllHots(this.data,this.showItemNum);
        
            }
            //去指定页面
            goSpecificPage(evt){
                window.scrollTo(0,700); 
                //获取用户点击的页码
                let e = evt || window.event;
                e.preventDefault ? e.preventDefault() : e.returnValue = false;
                this.haveShow = this.showItemNum * ($(e.currentTarget).html()- 1);
                this.renderAllHots(this.data,this.showItemNum);
            }
            toPre(){
                window.scrollTo(0,700); 
                this.haveShow = this.haveShow -  this.showItemNum * 2;
                this.renderAllHots(this.data,this.showItemNum);
            }
            toNext(){
                window.scrollTo(0,700); 
                this.renderAllHots(this.data,this.showItemNum);
            }
            toLast(){
                window.scrollTo(0,700); 
                this.haveShow = (this.totalPage - 1) * this.showItemNum;
                this.renderAllHots(this.data,this.showItemNum);
            }
        }
        let good_list = new GoodsList();
        good_list.init();
        // })()
})(jQuery);

;(function ($, window, document, undefined) {
    'use strict';
    function Paging(element, options) {
        this.element = element;
        this.options = {
            pageNum: options.pageNum || 1, // 当前页码
            totalNum: options.totalNum, // 总页码
            totalList: options.totalList, // 数据总记录
            callback: options.callback // 回调函数
        };
        this.init();
    }
    Paging.prototype = {
        constructor: Paging,
        init: function () {
            this.createHtml();
            this.bindEvent();
        },
        createHtml: function () {
            var me = this;
            var content = [];
            var pageNum = me.options.pageNum;
            var totalNum = me.options.totalNum;
            var totalList = me.options.totalList;
            content.push("<button type='button' id='firstPage'>首页</button><button type='button' id='prePage'>上一页</button>");
            // 总页数大于6必显示省略号
            if (totalNum > 6) {
                // 1、当前页码小于5且总页码大于6 省略号显示后面+总页码
                if (pageNum < 5) {
                    // 1与6主要看要显示多少个按钮 目前都显示5个
                    for (var i = 1; i < 6; i++) {
                        if (pageNum !== i) {
                            content.push("<button class='btn' type='button' data-page="+i+">" + i + "</button>");
                        } else {
                            content.push("<button type='button' data-page="+i+" class='current btn'>" + i + "</button>");
                        }
                    }
                    content.push(". . .");
                    content.push("<button type='button' data-page="+totalNum+" class='btn'>" + totalNum + "</button>");
                } else {
                    // 2、当前页码接近后面 到最后页码隔3个 省略号显示后面+总页面
                    if (pageNum < totalNum - 3) {
                        for (var i = pageNum - 2; i < pageNum + 3; i++) {
                            if (pageNum !== i) {
                                content.push("<button type='button' class='btn' data-page="+i+">" + i + "</button>");
                            } else {
                                content.push("<button type='button' class='current btn' data-page="+i+">" + i + "</button>");
                            }
                        }
                        content.push(". . .");
                        content.push("<button class='btn' type='button' data-page="+totalNum+">" + totalNum + "</button>");
                    } else {
                        // 3、页码至少在5，最多在【totalNum - 3】的中间位置 第一页+省略号显示前面
                        content.push("<button type='button' class='btn' data-page="+i+">" + 1 + "</button>");
                        content.push(". . .");
                        for (var i = totalNum - 4; i < totalNum + 1; i++) {
                            if (pageNum !== i) {
                                content.push("<button class='btn' type='button' data-page="+i+">" + i + "</button>");
                            } else {
                                content.push("<button type='button' class='current btn' data-page="+i+">" + i + "</button>");
                            }
                        }
                    }
                }
            } else {
                // 总页数小于6
                for (var i = 1; i < totalNum + 1; i++) {
                    if (pageNum !== i) {
                        content.push("<button type='button' class='btn' data-page="+i+">" + i + "</button>");
                    } else {
                        content.push("<button type='button' data-page="+i+" class='current btn'>" + i + "</button>");
                    }
                }
            }
            content.push("<button type='button' id='nextPage'>下一页</button><button type='button' id='lastPage'>尾页</button>");
            // content.push("<span class='totalNum'> 共 " + totalNum + " 页 </span>");
            // content.push("<span class='totalList'> 共 " + totalList + " 条记录 </span>");
            me.element.html(content.join(''));

            // DOM重新生成后每次调用是否禁用button
            setTimeout(function () {
                me.dis();
            }, 20);
        },
        bindEvent: function () {
            var me = this;
            me.element.off('click', 'button');
            // 委托新生成的dom监听事件
            me.element.on('click', 'button', function () {
                // let e = evt || event;
                //   e.preventDefault ? e.preventDefault() : e.returnValue = false;
                var id = $(this).attr('id');
                var num = parseInt($(this).html());
                var pageNum = me.options.pageNum;
                if (id === 'prePage') {
                    if (pageNum !== 1) {
                        me.options.pageNum -= 1;
                    }
                } else if (id === 'nextPage') {
                    if (pageNum !== me.options.totalNum) {
                        me.options.pageNum += 1;
                    }
                } else if (id === 'firstPage') {
                    if (pageNum !== 1) {
                        me.options.pageNum = 1;
                    }
                } else if (id === 'lastPage') {
                    if (pageNum !== me.options.totalNum) {
                        me.options.pageNum = me.options.totalNum;
                    }
                } else {
                    me.options.pageNum = num;
                }
                me.createHtml();
                if (me.options.callback) {
                    me.options.callback(me.options.pageNum);
                }
            });
        },
        dis: function () {
            var me = this;
            var pageNum = me.options.pageNum;
            var totalNum = me.options.totalNum;
            if (pageNum === 1) {
                me.element.children('#firstPage, #prePage').prop('disabled', true);
            } else if (pageNum === totalNum) {
                me.element.children('#lastPage, #nextPage').prop('disabled', true);
            }
        }
    };
    $.fn.paging = function (options) {
        return new Paging($(this), options);
    }
})(jQuery, window, document);